<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>聊天记录</title>

    <link rel="stylesheet" href="../../../layui.css">
    <style>
        body .layim-chat-main {
            height: auto;
        }
    </style>
</head>
<body>

<div class="layim-chat-main">
    <ul id="LAY_view"></ul>
</div>


<div id="LAY_page" style="margin: 0 10px;"></div>

<textarea title="消息模版" id="LAY_tpl" style="display:none;">
<%# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ %>
    &lt;li class="layim-chat-mine"&gt;&lt;div class="layim-chat-user"&gt;&lt;img src="<% item.avatar %>"&gt;&lt;cite&gt;&lt;i&gt;<% layui.data.date(item.timestamp) %>&lt;/i&gt;<% item.username %>&lt;/cite&gt;&lt;/div&gt;&lt;div class="layim-chat-text"&gt;<% layui.layim.content(item.content) %>&lt;/div&gt;&lt;/li&gt;
    <%# } else { %>
    &lt;li&gt;&lt;div class="layim-chat-user"&gt;&lt;img src="<% item.avatar %>"&gt;&lt;cite&gt;<% item.username %>&lt;i&gt;<% layui.data.date(item.timestamp) %>&lt;/i&gt;&lt;/cite&gt;&lt;/div&gt;&lt;div class="layim-chat-text"&gt;<% layui.layim.content(item.content) %>&lt;/div&gt;&lt;/li&gt;
    <%# }
  }); %>
</textarea>

<!--
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->

<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>
<script src="../../../../layui.js"></script>
<script>
    layui.use(['layim', 'laypage'], function () {
        var layim = layui.layim
            , layer = layui.layer
            , laytpl = layui.laytpl
            , $ = layui.jquery
            , laypage = layui.laypage;

        //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html


        //开始请求聊天记录
        // var param = location.search,//获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }

        //调用
        var Request = new Object();
        Request = GetRequest();
        var id, type;
        id = Request['id'];
        type = Request['type'];
        var mark = 0;

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function getData(page = 1) {
            $.ajax({
                url: "/home/chat_log",
                type: "post",
                data: {id: id, type: type, page: page},
                dataType: "json",
                success: function (res) {
                    // var html = laytpl(LAY_tpl.value).render({
                    //     data: res.data
                    // });
                    // $('#LAY_view').html(html);
                    if (mark == 0) {
                        laypage({
                            cont: $('#LAY_page'),
                            pages: res.data.last_page,//总页数
                            curr: 1,//当前页
                            groups: 3,//连续分页数
                            jump: function (obj, first) {
                                //得到了当前页，用于向服务端请求对应数据
                                var curr = obj.curr;
                                getData(curr)
                            }
                        });
                    }
                    mark = 1;
                    laytpl.config({
                        open: '<%',
                        close: '%>'
                    });
                    var html = laytpl(LAY_tpl.value).render({
                        data: res.data.data
                    });
                    $('#LAY_view').html(html);
                },
                error: function () {
                    layer.msg("网络繁忙", function () {
                    });
                }
            });
        }

        getData(1);
    });
</script>
</body>
</html>
